<script setup>
import { reactive, ref, onMounted } from "vue";
import { useNewsStore } from "@/stores";
import Header from "./components/Header.vue";
import Menu from "./components/Menu.vue";
import News from "./components/News.vue";

const newsStore = useNewsStore();
const store = reactive({
  swiperList: [],
});

const menuList = [
  {
    name: "gift-fill",
    color: "#5ed2ff",
    title: "社团智库",
  },
  {
    name: "photo-fill",
    color: "rgb(183, 67, 225)",
    title: "似水流年",
  },
  {
    name: "heart-fill",
    color: "#ff8300f5",
    title: "活动日程",
  },
  {
    name: "pushpin-fill",
    color: "rgb(57, 220, 91)",
    title: "申报/审批",
  },
];

onMounted(async () => {
  store.swiperList.push(...(await newsStore.news()));
});
</script>

<template>
  <view class="">
    <Header :list="store.swiperList.slice(0, 3)" />
    <app-gap />
    <Menu :list="menuList" />
    <app-gap />
    <News :list="store.swiperList" />
    <app-bottom-bar :current="0" />
  </view>
</template>

<style lang="scss" scoped></style>
